<template>
    <div id="app" :class="{
        dark: darkMode,
    }">
        <div v-if="loading" id="
                             ">
            <img src="./assets/loading.png" />
        </div>
        <keep-alive include="Check">
            <router-view class="router" />
        </keep-alive>
    </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
    data () {
        return {
            transitionName: "",
            loading: false,
        };
    },
    computed: {
        ...mapState(["devId", , "darkMode", "updating"]),
        ...mapGetters(["canConnect", "canControl"]),
    },
    //监听蓝牙设备的数据及状态的变化
    watch: {
        $route (to, from) {
            let isBack = this.$router.isBack; // 监听路由变化时的状态为前进还是后退(监听联网没)
            this.$router.to = to;
            this.$router.from = from;
            if (
                (to && to.query && to.query.from === "intelligent") ||
                (to.name && to.name === "Security")
            ) {
                this.transitionName = "";
            } else if (isBack) {
                this.transitionName = "slide-right";
            } else {
                this.transitionName = "slide-left";
            }
            this.$router.isBack = false;
        },
    },
    methods: {
        //vue自带的框架
        ...mapActions(["getSystemInfoSync", "sendCommand", "setTitleVisible"]),
        ...mapMutations(["UPDATE_STATE"]),
        initSize () {

            let browserWidth = document.documentElement.clientWidth;
            this.UPDATE_STATE({ name: "browserWidth", value: browserWidth });
            document.documentElement.setAttribute("style", `font-size:10px`);
            // document.documentElement.setAttribute('style', `font-size:${browserWidth / 36}px`);
            if (browserWidth > 600 && browserWidth < 800) {
                document.documentElement.setAttribute("style", `font-size:11px`);
            }
        },
    },
    created () {
        window.addEventListener("resize", (e) => {
            this.initSize();
        });
        //初始化数据
        this.$store.dispatch("initCallback");
        //判断暗黑模式
        this.$store.dispatch("getDarkMode").then((darkMode) => {
            if (darkMode) {
                this.$store.dispatch("modifyTitleBar", true);
            } else {
                this.$store.dispatch("modifyTitleBar", false, "0");
            }
        });
        //获取状态栏高度
        this.$store.dispatch("getStatusBarHeight");

        //this.$store.dispatch('initDate');
        //复写物理按键，返回按钮
        this.$store.dispatch("overrideBackPressed", true);

        this.$store.dispatch("getDevInfoAll").then(() => {
            this.$store.dispatch("getHistoryData");
        });

        // 同步系统信息
        this.getSystemInfoSync();
    },
    mounted () {
        this.$nextTick(() => {
            this.initSize();
        });
    },
};
</script>

<style lang="less">
#app {
    background-color: var(--emui_color_subbg);
}

#loading {
    width: 100%;
    height: 100%;
    background-color: var(--emui_color_subbg);
    position: fixed;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 5.6rem;
        height: 5.6rem;
    }
}

.router {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    transition: all 0.3s ease;
}

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
    transform: translateX(100%);
}

.slide-right-enter,
.slide-left-leave-active {
    opacity: 0;
    transform: translateX(-100%);
}
</style>
